<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            margin-left: 20px;
            width: 203px;
        }
        input{
            outline: none;
            border: 0;
            border-bottom: 1px solid #000000;
        }
        .btns{
            display: flex;
            flex-wrap: wrap;
        }
        .btn{
            display: flex;
            flex-wrap: wrap;
            width: 45px;
            height: 45px;
            border-radius: 22.5px;
            background-color: deeppink;
            text-align: center;
            line-height: 45px;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="content">
<!--    <input type="text" id="txt"><button id="dele"><strong><<</strong></button>-->
<!--    <div>-->
<!--        <input type="button" value="1" class="btns"></div>-->

    <div>
        <span>算式：</span>
        <input id="exp" name="exp" value="" /></div>
    <div>
        <span>结果：</span>
        <input id="result" name="result" value="" /></div>

    <div class="btns">
        <div class="btn">C</div>
        <div class="btn">CE</div>
        <div class="btn">

        </div>
        <div class="btn">

        </div>
        <div class="btn">
            1
        </div>
        <div class="btn">
            2</div>
        <div class="btn">
            3
        </div>
        <div class="btn">
            +
        </div>
        <div class="btn">
            4
        </div>
        <div class="btn">
            5
        </div>
        <div class="btn">
            6
        </div>
        <div class="btn">
            -
        </div>
        <div class="btn">
            7
        </div>
        <div class="btn">
            8
        </div>
        <div class="btn">
            9
        </div>
        <div class="btn">
            *
        </div>
        <div class="btn">
            /
        </div>
        <div class="btn">
            0
        </div>
        <div class="btn">
            .
        </div>
        <div class="btn">
            =
        </div>


    </div>
</div>
<script>
    var btns =  '' ;
    var exp_input = document.getElementById("exp");
    var result_input =document.getElementById("result")
    var exp = "";
    window.onload =  function (){
        btns = document.getElementsByClassName('btn');
        for (let btn of btns) {
            btn.onclick = function (){
                console.log(this.innerHTML.trim());
                if (this.innerHTML.trim()==="C"){
                    exp = "";
                    exp_input.value = exp;
                }else if (this.innerHTML.trim()==="="){
                    var v = eval(exp);
                    result_input.value = v;
                }
                else {
                    exp += this.innerHTML.trim();
                    exp_input.value = exp;

                }

                // exp += this.innerHTML.trim();
                // console.log(exp);
            }
        }
        console.log(btns);
    }
</script>
</body>
</html>